<template>
  <div class="headers">
    <el-row style="height: 40px;">
      <el-col :span="2">
        <img
          v-if="!isCollapse"
          class="expand"
          src="../../static/images/expandd.jpg"
          alt
          @click="showMenu"
        >
        <img v-else class="expand" src="../../static/images/expanddd.jpg" alt @click="showMenu">
      </el-col>
      <el-col :span="20" style="text-align:right;">
        <el-dropdown trigger="hover" style="position: absolute;top: 0%;">
          <span>
            {{uesrName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <span @click="doLogOut">22切换账号</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="changePW">修改密码</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <!--修改密码-->
    <el-dialog v-dialogDrag ref="dialog_isEdit" title="修改密码" :visible.sync="isEdit" width="40%">
      <el-form :model="theEdit" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="原密码：" prop="old_password">
          <el-input v-model="theEdit.old_password" placeholder="请输入原密码" clearable></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="new_password">
          <el-input v-model="theEdit.new_password" placeholder="请输入新密码" clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="confirm_password">
          <el-input v-model="theEdit.confirm_password" placeholder="请确认密码" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="doEdit('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import myhttp, {
  isEmpty,
  msgError,
  msgSuccess,
  msgWarning
} from "../utils/myhttp";
import api from "../utils/api";
import qs from "qs";
export default {
  data() {
    return {
      fullWidth: document.documentElement.clientWidth,
      theWidth: document.documentElement.clientWidth,
      fullHeight: document.documentElement.clientHeight,
      timer: null,
      searchText: "",
      loading: "",
      uesrName: localStorage.getItem("loginName"), //登录名,
      roleName: "ff",
      thePath: "", //当前路由
      isCollapse: false,
      noReadTotal: 2 ,//
      theEdit: {
        old_password: "" ,
        new_password: "",
        confirm_password: "",
      }, //编辑表单
      rules: {
        //表单验证
        old_password: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
          { min: 3, max: 25, message: "长度在 3 到 25 个字符", trigger: "blur" }
        ],
        new_password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 3, max: 25, message: "长度在 3 到 25 个字符", trigger: "blur" }
        ],
        confirm_password: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { min: 3, max: 25, message: "长度在 3 到 25 个字符", trigger: "blur" }
        ],
      },
      isEdit:false,
    };
  },
  watch: {
    fullWidth(val) {
      console.log(val);
    },
    thePath(val) {
      this.searchText = "";
    }
  },
  components: {},
  methods: {
    doLogOut: async function() {
      const responseData = await myhttp.post(api.doLoginOut, null);
      if (responseData.data.result == "success") {
        //清除定时器
        clearInterval(this.timer);
        this.timer = null;
        msgSuccess(this, "退出成功！");
        this.$router.push({ name: "login" });
      } else {
        msgError(this, "请重试！");
      }
    },
    changePW() {
      this.isEdit = true;
    },
    toHome() {
      localStorage.setItem("selectedMenu", "6");
      // this.$emit("showbox", "1-01"); //触发showbox方法，'the msg'为向父组件传递的数据
      this.$router.push({ name: "userManagement" });
    },
    headImgClick() {
      console.log("headImgClick");
    },
    showMenu() {
      this.isCollapse = !this.isCollapse;
      localStorage.setItem("isCollapse", this.isCollapse);
      this.$emit("collapse", {
        value: this.isCollapse
      });
    },
    openLoading() {
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    setTimer() {
      //设置定时器，一分钟刷新一次未读信息
      if (this.timer == null) {
        this.timer = setInterval(() => {
          if (this.theWidth != this.fullWidth) {
            this.theWidth = this.fullWidth;
            location.reload();
          }
        }, 2000);
      }
    }
  },
  created() {},
  mounted() {
    clearInterval(this.timer);
    this.timer = null;
    this.setTimer();
    window.onresize = () => {
      return (() => {
        window.fullWidth = document.documentElement.clientWidth;
        this.fullWidth = window.fullWidth;
      })();
    };
  }
};
</script>
<style scoped>
.expand {
  position: absolute;
  top: 30%;
  padding: 0;
  width: 32px;
  height: 20px;
  margin-left: 20px;
  /*animation (动画) :绑定选择器, 4s完成动画 linear(匀速) infinite(循环) */
  /* animation: que 2s linear; */
}
/*通过@keyframes规则,能够创建动画 , que 定义动画的名称 可自己定义*/
@keyframes que {
  /*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
  0% {
    /*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
.headers {
  width: 100%;
  background-color: #ffffff;
  height: 40px;
  line-height: 40px;
}
.cs {
  border: 1px solid red;
}
.flex {
  display: flex;
}
.al-c {
  align-items: center;
}
.just-c {
  justify-content: center;
}
.msgP {
  position: relative;
}
.msgC {
  width: 21px;
  height: 17px;
  position: absolute;
  right: 14px;
  top: 1px;
  z-index: 100;
  text-align: center;
  color: white;
  font-size: 14px;
  border-radius: 45px;
  background-color: red;
}
.active_crumb {
  color: rgb(90, 160, 230);
}
/* .btn_logout {
  color: white;
  background-color: rgb(90, 160, 230);
} */
.head_img {
  border-radius: 100%;
  width: 40px;
  height: 36px;
}
.img {
  margin-left: 50px;
  width: 100px;
  height: 36px;
}
.logo {
  width: 200px;
}
</style>


